<template>
	<view class="ronghe">
		<view class="droplet"></view>
		<view class="droplet"></view>
		<view class="droplet"></view>
		<view class="content"></view>
		<text>98%</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: ''
			}
		},
	}
</script>

<style lang="scss">
	.ronghe {
		position: relative;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: rgb(5, 5, 5);
		filter: contrast(30);
	}

	.droplet {
		position: absolute;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background-color: rgb(61, 233, 99);
		filter: blur(20px);
		animation: fall 3s linear infinite;
		opacity: 0;
	}

	.ronghe view:nth-of-type(2) {
		animation-delay: 1.5s;
	}

	.ronghe view:nth-of-type(3) {
		animation-delay: 3.5s;
	}

	@keyframes fall {
		0% {
			opacity: 0;
			transform: scale(0.8) translateY(-500%);
		}

		50% {
			opacity: 1;
			transform: scale(0.5) translateY(-100%);
		}

		100% {
			transform: scale(0.3) translateY(0px);
		}
	}

	.content {
		position: absolute;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background-color: rgb(61, 233, 99);
		filter: blur(20px);
		animation: zhuan 3s infinite;
	}

	@keyframes zhuan {
		0% {
			transform: scale(1) rotate(0deg);
		}

		50% {
			transform: scale(1.1) rotate(180deg);
			height: 90px;
			border-top-left-radius: 45%;
			border-bottom-left-radius: 48%;

		}

		100% {
			transform: scale(1) rotate(360deg);
		}
	}

	text {
		position: absolute;
		color: rgb(184, 182, 182);
		font-size: 24px;
	}
</style>
